<template>
  <div>

    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>原材料详情</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card class="box-card">



      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="编号" prop="code">
              <el-input v-model="ruleForm.code" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原材料名称" prop="name">
              <el-input type="text" v-model="ruleForm.name" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="化元素叫法学" prop="chemical">
              <el-input type="text" v-model="ruleForm.chemical" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密度" prop="density">
              <el-input type="text" v-model="ruleForm.density" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="硬度" prop="hardness">
              <el-input type="text" v-model="ruleForm.hardness" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材料介绍" prop="remarks">
              <el-input type="text" v-model="ruleForm.remarks" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单价" prop="price">
              <el-input type="text" v-model="ruleForm.price" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" @click="addSave()">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </el-card>

  </div>
</template>

<script>
  export default {
    name: 'Detail',
    data(){
      return{
        ruleForm:{}
      }
    },
    methods:{
      //添加原材料
      getById:function (id) {
        this.$http.get("/material/getById/"+id).then((res)=>{
          this.ruleForm=res.data.result;
        });
      },
      addSave:function () {
        this.$router.push({ path: "/material" });
      }
    },
    mounted () {
      alert(this.$route.query.id);
      this.getById(this.$route.query.id);
    }
  }
</script>

<style scoped>

</style>
